<template>
    <div id="exam">
        <div class="right">
            <PageTitle :data="titleData">
                    <OperateCard :data="data1"></OperateCard>
            </PageTitle>
            <div class="container flex-1">
                <TableContainer :columns="columns" :tableData="tableData" :total="tableData.length" title="订单列表"
                    :showIndex="true" :showCheckbox="true">
                    <template #search>
                        <SearchInput placeholder="名称..." @search="handleSearch" />
                    </template>
                    <template #buttons>
                        <Icon v-if="tabIndex == 0" icon="icon-daoru" color="gray-line" tiptxt="重置"></Icon>
                    </template>
                    <template v-slot:actions="scope">
                        <div style="color: blue;">查看</div>
                    </template>
                </TableContainer>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';
import { useRouter } from 'vue-router';
import Icon from "@/components/common/Icon.vue";
import TableContainer from '@/components/common/TableContainer.vue';
import OperateCard from '@/components/common/OperateCard.vue';
import PageTitle from '@/components/common/PageTitle.vue';
import SearchInput from '@/components/common/SearchInput.vue';
const router = useRouter();

const tabIndex = ref(0)
const titleData = ref({
  title:'考试管理',
  items:[
    {title:'数据总数',value:'203',unit:'条'},
    {title:'更新时间',value:'2025-05-03'}
  ]
})
const data1 = ref({title:'新增考试'})
const columns1 = [
    { prop: 'examName', label: '考试名称' },
    { prop: 'cost', label: '费用' },
    { prop: 'tag', label: '标签' },
    { prop: 'registTime', label: '报名时间'},
    { prop: 'examTime', label: '考试时间' },
    { prop: 'numberPeople', label: '报名人数' },
    { prop: 'listOrnot', label: '是否上架' },
    { prop: 'actions', label: '操作' },
];

const columns = ref(columns1)

const tableData = ref([
    { examName: "六级考试", cost: "456", tag: "666", registTime: "微信", examTime: "2025.07.11",numberPeople:"5634",listOrnot:'list'},
    { examName: "六级考试", cost: "456", tag: "666", registTime: "微信", examTime: "2025.07.11",numberPeople:"5634",listOrnot:'list'},
    { examName: "六级考试", cost: "456", tag: "666", registTime: "微信", examTime: "2025.07.11",numberPeople:"5634",listOrnot:'list'},
]);

const filterObj = ref({
    status: '',
    type: ''
});
const options = ref([
    { label: "选项1", value: "选项1" },
    { label: "选项2", value: "选项2" },
    { label: "选项3", value: "选项3" },
]);


const isUnit = computed(() => {
    return false
})

const onTabClick = (val) => {
    tabIndex.value = val

    if (val == 1) {
        columns.value = columns2
    } else {
        columns.value = columns1
    }
}

const handleSearch = () => { }

</script>

<style scoped lang="less">
#exam {
    height: 100%;
    width: 100%;
    display: flex;
    gap: 8px;

    .left {
        width: 388px;
        background-color: #FFFFFF;
        border-radius: 32px;
    }

    .right {
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex: 1;
    }

    .container {
        background-color: #FFFFFF;
        height: 100%;
        border-radius: 40px;
        padding: 16px;
        padding-top: 0px;
    }
    .el-button {

    }
}
</style>